
import { useEffect, useState, useMemo, Fragment } from "react"
import * as api from "@/api/product"
import { Table, Image, Button, Modal, message } from "antd"
import { DeleteOutlined, EditOutlined, EyeOutlined } from "@ant-design/icons"
import Dialog from "../../../components/Dialog"


const ProductCategory = () => {
    let [category, setCategory] = useState([])
    //控制dialog显示隐藏
    let [visible, setVisible] = useState(false)
    //控制弹出框modal
    let [show, setShow] = useState(false)
    //当前行的数据
    let [currentRow, setCurrentRow] = useState({})

    //获取类目列表
    let getCategoryList = () => {
        api.getCategory()
            .then(res => {
                //console.log(res.data.data);
                setCategory([...res.data.data].reverse())
            })
    }

    useEffect(() => {
        getCategoryList()
    }, [])

    let dataSource = useMemo(() => {
        //console.log(category)
        return category.map(item => ({
            cImg: item.categoryImgurl,
            cId: item.category_id,
            cName: item.categoryName,
            cCTime: item.createTime,
            creator: item.creator,
            updateTime: item.updateTime,
            updator: item.updator,
            key: item._id
        }))
    }, [category])

    let titles = ['类目图片', '类目id', '类目名称', '创建时间', '创建人', '更新人', '操作']

    let columns = useMemo(() => {
        let col = []
        try {
            let keys = Object.keys(dataSource[0])
            col = titles.map((title, index) => {
                if (keys[index] === 'cImg') {
                    return {
                        title,
                        key: keys[index],
                        dataIndex: keys[index],
                        width: 100,
                        align: 'center',
                        render(v, r) {
                            console.log('v', v);    // v 是当前这一列的数据
                            //console.log('r', r);    // r 是当前这一列的数据对象
                            return (
                                <Image width={50} src={v ? v : "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"}></Image>
                            )
                        }
                    }
                } else {
                    return {
                        title,
                        key: keys[index],
                        dataIndex: keys[index],
                        align: 'center',
                    }
                }
            })

            //最后一列需要自己定义几个按钮
            let lastColumnObj = {
                title: "操作",
                key: '',
                align: 'center',
                render(_, r) {
                    return (
                        <Fragment>
                            <Button icon={<EyeOutlined />}>查看</Button>
                            <Button icon={<EditOutlined />} onClick={handleAdd}>编辑</Button>
                            <Button danger onClick={() => {
                                //弹出确认框
                                setShow(true)
                                //设置current数据
                                setCurrentRow(r)
                            }} icon={<DeleteOutlined />}>删除</Button>
                        </Fragment>
                    )
                }
            }
            //添加到最后一列
            col.push(lastColumnObj)
            return col
        } catch (e) {
            //console.log(e);
        }
    }, [category])

    // let columns = [
    //     {
    //         title: "类目图片",
    //         key: "cImg",
    //         dataIndex: "cImg"
    //     },
    //     {
    //         title: "类目id",
    //         key: "cId",
    //         dataIndex: "cId"
    //     }
    // ]
    
    let handleOk = (instance) => {
        console.log(instance);
        //调用表单提交的方法
        instance.current.submit()
        setVisible(false)
    }
    let handleCancel = () => {
        setVisible(false)
    }
    //添加数据
    let handleAdd = () => {
        setVisible(true)
        getCategoryList()
    }
    //删除类目
    let handleDelete = () => {
        let { cId: category_id } = currentRow
        api.deleteCategory(category_id)
            .then(res => {
                console.log(res);
                if (res.data.state) {
                    getCategoryList()
                    message.success('删除成功')
                } else {
                    message.error('删除失败' + res.data.msg)
                }
            })
    }
    return (
        <Fragment>
            <Modal
                title="删除提示"
                content
                visible={show}
                onOk={() => {
                    //删除数据
                    handleDelete()
                    //关闭弹框
                    setShow(false)
                }}
                onCancel={() => {
                    message.info('已取消删除')
                    setShow(false)
                }}
                okText="确认"
                cancelText="取消"
            >
                <b style={{ color: "red" }}>将永久删除此条数据，是否确认？</b>
            </Modal>
            <Dialog onOk={handleOk} onCancel={handleCancel} visible={visible} handlegetCategory={getCategoryList} />
            <Button type="primary" onClick={handleAdd}>点击增加</Button>
            <Table bordered columns={columns} dataSource={dataSource} />
        </Fragment>
    )
}

export default ProductCategory